<template>
  <div class="procedurepage">
    <div class="promain">
      <div class="up_procedure">
        <div class="title">1.上传程序</div>
        <div class="updataBox">
          <div class="updataMain">
            <el-form 
              :model="ruleForm" 
              :rules="rules" 
              ref="ruleForm" 
              label-width="120px" 
              class="demo-ruleForm">
              <el-form-item label="程序类型：" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="1">塑造程序</el-radio>
                  <el-radio label="2">取证程序</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="程序名称：" prop="name">
                <el-input clearable v-model.trim="ruleForm.name"></el-input>
                <span style="color:#999">*命名规则：类型-团队名-程序自定义名称</span>
              </el-form-item>
              <el-form-item label="版本号：" prop="version">
                <el-input clearable v-model.trim="ruleForm.version"  placeholder='例如:V1.0.0'></el-input>
              </el-form-item>
              <el-form-item label="团队：" prop="team">
                <el-input clearable v-model.trim="ruleForm.team" placeholder='例如:中科大网安学院刘斌老师团队'></el-input>
              </el-form-item>
              <el-form-item label="程序端口：" prop="procedure">
                <el-input clearable v-model.number="ruleForm.procedure" placeholder="请输入接口号：1000~65000"></el-input>
              </el-form-item>
              <el-form-item label="程序IP：" prop="callInter">
                <el-input clearable v-model.trim="ruleForm.callInter" placeholder='请输入'></el-input>
              </el-form-item>
              <el-form-item label="GPU卡序号：" prop="gpuIndex">
                <el-input clearable v-model.trim="ruleForm.gpuIndex" placeholder='请输入'></el-input>
              </el-form-item>
              
              <el-form-item label="描述：" prop="describe">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 10}"
                  placeholder="请输入内容"
                  maxlength="200"
                  show-word-limit
                  v-model="ruleForm.describe" >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          
        </div>
      </div>

      <div style="marginLeft:50px">
        <div class="title title2">2.程序参数设置</div>
        <div class="radioBox">
          <div class="radioSet">
            <el-form 
              :model="radioForm" 
              ref="radioItem" 
              label-width="100px" 
              class="demo-ruleForm">
              <el-form-item 
                v-for="(item,index) in radioForm.radioItem" :key="index" 
                :label="'参数'+ (index + 1) + ':'" >
                <el-radio-group   v-model="item.radio">
                  <el-radio label="1">视频</el-radio>
                  <el-radio label="2">音频</el-radio>
                  <el-radio label="3">图片</el-radio>
                </el-radio-group>
                <el-button 
                  class="add"
                  size="mini" 
                  icon="el-icon-plus" 
                  v-if="(radioForm.radioItem.length-1 == index && radioForm.radioItem.length < 3)"
                  @click="addRadioItem"
                ></el-button>
                <el-button 
                  class="delete" 
                  size="mini" 
                  icon="el-icon-minus" 
                  v-if="radioForm.radioItem.length-1 == index && radioForm.radioItem.length > 1"
                  @click="deleteRadioItem(index)"
                ></el-button>
              </el-form-item>
              
            </el-form>
          </div>
        </div>
      </div>
    </div>
      <!-- <div class="footBottom">
         <el-button  type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div> -->
    <div class="create">
      <el-button  @click="back" class="bac">返回</el-button>
      <el-button  @click="submitForm('ruleForm')" class="add">立即创建</el-button>
    </div>
    
  </div>
</template>

<script>
import lines from '../../../components/lines.vue'
import { insertProgram } from '../../../api/index'
export default {
  data(){
      var checkName = (rule, value, callback) => {
        var nameRule = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/ 
        if (!value) {
          callback(new Error('程序名称不能为空'));
        }else if(value.length > 50){
          callback(new Error('程序名称长度限制50个汉字'));
        }else if(!nameRule.test(value)){
          callback(new Error('程序名称由中文、英文、数字、下划线组成，不支持特殊字符'));
        }else{
          callback()
        }
      };
      var checkVersion = (rule, value, callback) => {
        var versionRule = /^(V)([0-9]\d|[0-9])(.([0-9]\d|\d)){2}$/
        if (!value) {
          callback(new Error('版本号不能为空'));
        }else if(value.length >= 10){
          callback(new Error('版本号长度应小于10个字符'));
        }else if(!versionRule.test(value)){
           callback(new Error('版本号由V+数字.数字组成,例如：V1.0.0'));
        }else{
          callback()
        }
      };
      var checkTeam = (rule, value, callback) => {
        var teamRule = /^[\u4e00-\u9fa5]+$/;
        if (!value) {
           callback(new Error('团队不能为空'));
        }else if(value.length >= 50){
           callback(new Error('团队长度应小于50个字符'));
        }else{
          callback()
        }
        // else if(!teamRule.test(value)){
        //    callback(new Error('团队必须为汉字'));
        // }
      };
      var checkProcedure = (rule, value, callback) => {
        if (!value) {
           callback(new Error('程序接口不能为空'));
        }else if(typeof(value) != "number"){
           callback(new Error('程序接口必须为数字'));
        }else if(!(value >= 1000 && value <= 65000) ){
           callback(new Error('程序接口应在1000~65000之间'));
        }else{
          callback()
        }
      };
      var checkCallInter = (rule, value, callback) => {
        var nameRule = /^[a-zA-Z0-9.]+$/ 
        if (!value) {
           callback(new Error('程序IP不能为空'));
        }else if(value.length > 30){
           callback(new Error('程序IP长度不得超过30'));
        }else if(!nameRule.test(value) ){
           callback(new Error('程序IP格式由英文、数字组成'));
        }else{
          callback()
        }
      };
      var checkDescribe = (rule, value, callback) => {
        if (!value) {
           callback(new Error('描述不能为空'));
        }else if(value.length > 200){
           callback(new Error('描述长度应小于200'));
        }else{
          callback()
        }
      };
      
      return{
        ruleForm: {
          resource: '',
          name:'',
          version:'',
          team:'',
          procedure:'',
          callInter:'',
          gpuIndex:'',
          describe:'',
        },
        radioForm:{

          radioItem:[{
            radio:'1',
          }]
        },
        rules: {
          resource: [
            { required: true, message: '请选择程序类型', trigger: 'change' }
          ],
          name:[{
            validator: checkName, trigger: 'blur',required: true,
          }],
          version:[{
            validator: checkVersion, trigger: 'blur',required: true,
          }],
          team:[{
            validator: checkTeam, trigger: 'blur',required: true, 
          }],
          procedure:[{
            validator: checkProcedure, trigger: 'blur',required: true, 
          }],
          callInter:[{
            validator: checkCallInter, trigger: 'blur',required: true
          }],
          gpuIndex:[{
            required: true,trigger: 'blur',message:'请输入GPU卡序号'
          }],
          describe:[{
            validator: checkDescribe, trigger: 'blur',required: true
          }],
        }
      }
  },
  components:{
    lines
  },
  methods:{
    addRadioItem(){
      this.radioForm.radioItem.push({radio:'1'})
    },
    deleteRadioItem(index){
      this.radioForm.radioItem.splice(index,1)
    },
    submitForm(formName) {
      let programName = this.ruleForm.name
      let programType = this.ruleForm.resource
      let versionNumber = this.ruleForm.version
      let team = this.ruleForm.team
      let programPort = this.ruleForm.procedure
      let programIp = this.ruleForm.callInter
      let gpuIndex = Number(this.ruleForm.gpuIndex)
      let description = this.ruleForm.describe

      let programParameters1 = null
      let programParameters2 = null
      let programParameters3 = null
      let programParameters4 = null
      this.radioForm.radioItem.forEach((el,index)=>{
        if(index == 0){
          programParameters1 = Number(el.radio) 
        }else if(index == 1){
          programParameters2 = Number(el.radio)
        }else if(index == 2){
          programParameters3 = Number(el.radio)
        }else if(index == 3){
          programParameters4 = Number(el.radio)
        }
      })

      let params = {programName,programType,versionNumber,team,programIp,gpuIndex,programPort,description,programParameters1,programParameters2,programParameters3,programParameters4}
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('请保证所填参数准确，参数错误将影响程序执行结果, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            insertProgram(params).then(res=>{
              if(res.data.message == "success"){
                this.$message({
                  showClose: true,
                  message: '创建成功',
                  type: 'success'
                });
                this.$router.go(-1)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消创建'
            });          
          });         
        } else {
          return false;
        }
      });
    },
    back(){
      this.$router.push('/home/procedure')
    }
    
  }

}
</script>

<style lang='less' scoped>
.procedurepage{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  .promain{
    height: 716px;
    display: flex;
    background-color: #282C41;
    /deep/.el-radio {
      color: #fff;
    }
    /deep/.el-radio__input.is-checked+.el-radio__label {
        color: #fff;
    }
    .title{
      background: linear-gradient(270deg, #2B5269 0%, #2B6A82 100%);
      color: #fff;
      width: 200px;
      height: 37px;
      margin-left: 38px;
      margin-top: 16px;
      line-height: 37px;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .title2{
      margin-left: 0;
    }
    .up_procedure{
      .updataBox{
        width: 500px;
        margin-left: 90px;
        .updataMain{
          width: 500px;
          /deep/.el-form-item__label {
            color: #fff;
          }
          /deep/.el-input__inner {
              background-color: #4F5367;
              border-radius: 2px;
              border: 1px solid #7A7F8E;
              color: #fff;
              height: 30px;
              line-height: 30px;
              padding: 0 15px;
              width: 400px;
          }
          /deep/.el-textarea__inner {
              width: 400px;
              display: block;
              color: #fff;
              background-color: #4F5367;
              border: 1px solid #7A7F8E;
              border-radius: 2px;
          }
          /deep/.el-textarea .el-input__count{
            background-color: #4F5367;
          }
        }
      }
    }
  }
  
  .radioBox{
    width: 450px;
    .radioSet{
      width: 450px;
      /deep/.el-form-item__label {
        color: #fff;
      }
      .add{
        width: 28px;
        height: 28px;
        background: #234056;
        border: 1px solid #04D4FF;
        color: #04D4FF;
        border-radius: 2px;
        padding: 0;
        margin-left: 20px;
      }
      .delete{
        width: 28px;
        height: 28px;
        background: #282C41;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
        padding: 0;
        margin-left: 20px;
      }
    }
  }
  .footBottom{
    padding-left: 100px;
  }

  .create{
    position: fixed;
    width: calc(100% - 200px);
    height: 50px;
    background-color: #282C41;
    bottom: 0;
    left: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;
    box-sizing: border-box;
    .bac{
      background-color: transparent;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 2px;
      width: 122px;
    }
    .add{
      color: #63E9FF;
      border: 1px solid #00CEF0;
      background-color: rgba(49, 203, 236, 0.1400);
      border-radius: 2px;
      width: 122px;
    }
  }
}
</style>